<template>
    <div class="treenMax" ref="gettqaz">
        <publiMin :title="'热门品牌'" :biao="'国际经典 品质靠谱'">
            <template>
                <p class="leftt" @click="changePage()">&lt;</p>
                <p class="rightt" @click="changePa()">&gt;</p>
            </template>
            <template v-slot:qq>
                <div class="xin">
                    <ul ref="sui">
                        <li v-for="item in qaz" :key="item.id">
                            <img :src="item.logo" alt="">
                        </li>
                    </ul>
                </div>

            </template>
        </publiMin>
    </div>
</template>
<script>
import publiMin from "@/components/bottom/publiMin"
import { getbrandd } from "@/utils/api/homeapi"
import { lazyload } from "@/utils/content"
export default {
    components: { publiMin },
    data() {
        return {
            qaz: []
        }
    },
    mounted() {
        this.getqaz()
        lazyload(this.$refs.gettqaz,this.getqaz)
    },
    methods: {
        async getqaz() {
            let data = await getbrandd()
            this.qaz = data.data.result
        },
        changePa() {
            this.$refs.sui.style.left=-1200+'px'
        },
        changePage() {
            this.$refs.sui.style.left=0+'px'
        },
    }
}
</script>
<style lang="scss">
.treenMax {
    width: 100%;
    height: 460px;
    background: #f5f5f5;
    margin-top: 20px;

    .xin {
        width: 1200px;
        height: 100%;
        margin: auto;
        // background: pink;
        overflow: hidden;
        position: relative;

        ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 2400px;
            height: 300px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 3s;

            img {
                width: 98%;
                height: 100%;
                margin-left: 4.5%;
            }
        }
    }

}

.leftt {
    color: white;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    margin-left: 850px;
}
.leftt:active+.rightt{
    background: green;
}
.rightt {
    color: white;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
.rightt:active+.leftt{
    background: green;
}
</style>